<template>
  <div class="editor-frame--renderer-node-box" @click.stop="handleSelect">
    <div class="editor-frame--renderer-node-box-tools">
      <q-button
        type="text"
        danger
        icon="qax-icon-Remove"
        @click.stop="handleDelete"
      ></q-button>
    </div>

    <component :is="node.componentName" v-bind="node.props" :node="node" />
  </div>
</template>

<script>
export default {
  name: 'NodeBox',
};
</script>

<script setup>
import { getCurrentInstance, onMounted } from '@vue/composition-api';
import { useDocument } from '../../hooks';

const props = defineProps({
  node: {
    type: Object,
    default: () => ({}),
  },
  isDragging: {
    type: Boolean,
    default: false,
  },
});

const { proxy } = getCurrentInstance();
const document = useDocument();

const handleSelect = () => {
  if (props.isDragging) return;
  document.value.setSelection(props.node);
};

const handleDelete = async () => {
  proxy.$emit('keyCodeDelete', props.node);
};
</script>


<style lang="scss" scoped>
.editor-frame--renderer-node-box {
  cursor: move;
  position: relative;
  z-index: 1;
  height: 100%;
}

.editor-frame--renderer-node-box-tools {
  /* display: none; */
  position: absolute;
  right: 4px;
  top: 4px;
  z-index: 1;
  .q-button {
    font-size: 20px;
  }
}

.editor-frame--renderer-node-box:hover .editor-frame--renderer-node-box-tools {
  display: block;
}
</style>
